<script setup>
import OApageheader from '../../components/OApageheader.vue';
import {ref,reactive,onMounted,computed,watch,onBeforeUnmount,shallowRef} from 'vue';
import {ElMessage} from 'element-plus';
import apiClient from '../../api/api';
import OAMain from '../../components/OAMain.vue';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { useAuthStore } from '../../stores/auth.js'; // 导入 auth 模块的 store
const authStore = useAuthStore(); // 获取 auth 模块的 store

let form = reactive({ 
  email: '', 
  password: '', 
  realname: '', 
})

let formref = ref(); // 表单引用对象，用于操作表单

const rules = reactive({ // 表单验证规则对象，用于验证表单输入的值是否符合要求
  email: [ // 邮箱验证规则
    { required: true, message: '请输入邮箱', trigger: 'blur' }, // 验证规则：必填，提示信息：请输入邮箱，触发时机：失去焦点
  ],
  password: [ // 密码验证规则
    { required: true, message: '请输入密码', trigger: 'blur' }, // 验证规则：必填，提示信息：请输入密码，触发时机：失去焦点
  ],
  realname: [ // 真实姓名验证规则
    { required: true, message: '请输入真实姓名', trigger: 'blur' }, // 验证规则：必填，提示信息：请输入真实姓名，触发时机：失去焦点
  ],
})

const onSubmit = async () => { // 提交表单
  try { // 发送请求
    let res = await apiClient.post('staff/addstaff/', { // 发送请求，添加表单数据
      email: form.email, 
      password: form.password,
      realname: form.realname, 
    }); // 发送请求，添加表单数据
    ElMessage.success(res.data.msg); // 提示成功信息
    form = reactive({ // 重置表单数据对象，用于存储表单输入的值
      email: '', 
      password: '', 
      realname: '', 
    }) // 重置表单数据对象，用于存储表单输入的值
  } catch (error) { 
    ElMessage.error(error.response?.data?.msg || '添加失败');
  }
}

</script>

<template>
  <OAMain>
    <OApageheader content="添加员工"></OApageheader>
    <el-card shadow="always">
        <el-form :model="form" :rules="rules" ref="formref" label-width="80px"> <!-- 表单 -->
            <el-form-item label="邮箱" prop="email"> <!-- 表单项 -->
                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input> <!-- 输入框 -->
            </el-form-item> 
            <el-form-item label="密码" prop="password"> 
                <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input> <!-- 输入框 -->
            </el-form-item> 
            <el-form-item label="真实姓名" prop="realname"> 
                <el-input v-model="form.realname" placeholder="请输入姓名"></el-input> 
            </el-form-item> 
            <el-form-item label="部门"> 
                <el-input readonly disabled placeholder="请输入部门" :value="authStore.user.department.name" ></el-input> 
            </el-form-item> 
            <el-form-item> 
                <el-button type="primary" @click="onSubmit">提交</el-button> <!-- 按钮 -->
            </el-form-item> 
        </el-form> <!-- 表单 -->
    </el-card>
  </OAMain>
</template>

<style scoped>

</style>
